webpack - 打包iconfont文件

直接到iconfont官网下载

随便选择几张icon，下载。

使用方式直接打开，demo-index.html

直接使用 font-class方式引用。

将iconfont.css、iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff拷贝到 src目录下，这些文件具体看iconfont.css

然后在index.js中引入iconfont.css，在index.html中加入使用。

    <span class="iconfont icon-banquan"></span>
    <span class="iconfont icon-anquanyinsi"></span>
    <span class="iconfont icon-dicengjiagou"></span>
    <span class="iconfont icon-cangchucangku"></span>

打包其他资源我们使用file-loader，之前已经装过，所以直接在webpack.config.js中写配置。

{
  // exclude：排除 css,js,html, json, less文件
  exclude: /\.(css|js|html|json|less)$/,
  loader: 'file-loader',
}

注意：exclude会排除文件，所以将你需要排除的文件都加入，不然构建会有问题

构建打包后

可以看到 iconfont的用到的资源全部已经加入，直接运行dist/index.html，就可以看到效果。

同样如果要修改文件名

{
  // exclude：排除 css,js,html, json, less文件
  exclude: /\.(css|js|html|json|less)$/,
  loader: 'file-loader',
  options: {
    name: '[hash:10].[ext]'
  }
},

file-loader适用任何你要拷贝到构建目录的功能。

本章结束！